/*第一层*/

@keyframes animX {
  0% {
    left: -150px;
  }

  100% {
    left: 90%;
  }
}

@keyframes animY {
  0% {
    top: 0px;
  }

  100% {
    top: 650px;
  }
}

@keyframes scale {
  0% {
    transform: scale(0.6);
    z-index: 0;
  }

  50% {
    transform: scale(1);
    z-index: 3;
  }

  100% {
    transform: scale(0.5);
    z-index: 0;
  }
}

.ball {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 60px;
  /*background-color: #f66;*/
  position: absolute;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  line-height: 120px;
  z-index: 6;
  /*动画执行一次所需时间*/
  animation-duration: 10s, 10s, 20s;
  /*动画以何种运行轨迹完成一个周期*/
  animation-timing-function: cubic-bezier(0.36, 0, 0.64, 1);
  /*动画播放次数,无线循环播放*/
  animation-iteration-count: infinite;
  /*是否轮流反向播放动画 alternate:正向播放*/
  animation-direction: alternate;
  animation-name: animX, animY, scale;
}
.img-item {
  width: 250px;
  height: 250px;
}
.active_item {
  animation-play-state: paused;
}
